<template>
 <div class="cards" @mouseenter="handleEnter" @mouseleave="handleLeave"  ref="img">
    <div class="chinese" v-show="flag">{{text}}</div>
    <div class="english" v-show="flag">{{text2}}</div>
    <div class="flag" v-show="!flag" v-html="text3"></div>
    <img src="@/assets/img/jsbj.png" alt="" />
 </div>
</template>

<script>
export default {
    props:{
        text:String,
        text2:String,
        text3:String
    },
    data(){
        return{
            flag:true
        }
    },
    methods:{
        handleEnter(){
            this.flag = false
            this.$refs.img.style.cssText = `
            transition: all linear 0.3s;`
        },
        handleLeave(){
            this.flag = true
            this.$refs.img.style.cssText=`transition: all linear 0.2s;`
        }
    }
}
</script>

<style scoped lang="scss">
    .cards{
        /* width:350px; */
        /* height: 500px; */
        /* background-color: red; */
        /* background-image: url(@/assets/img/jsbj.png) ; */
        /* background-size: 100% 100%; */
        // padding:30px;
        text-align: center;
        position:relative;
        img{
            width: 100%;
            height: 100%;
        }
    }
    .flag{
        position:absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background-color: rgba(25, 25, 25, 0.5);
        color:white;
        padding: 30px;
        text-align: center;
    }
    .chinese{
        font-size: 35px;
        position: absolute;
        top: 45%;
        left: 50%;
        transform: translate(-50%,-45%);
        color:rgb(255, 255, 255);
        z-index: 9999;
        -webkit-text-stroke: 0.8px black;
        font-weight:bold;
    }
    .english{
        font-size: 50px;
        position: absolute;
        top: 40%;
        left: 50%;
        transform: translate(-50%,-40%);
        color:rgb(116, 116, 116);
    }
</style>